<template>
  <div class="homeBox" >
    <el-container style="height: 100%" direction="vertical">
      <el-header style=" height: 70px">
        <LoginHead></LoginHead>
      </el-header>
      <el-main>
        <div id="main-loginBlock">
          <h1 id="title" align="center">欢迎登录</h1>
          <div id="main-loginTable">
          <LoginForm></LoginForm>
          </div>
        </div>
      </el-main>
      <el-footer style="height: 60px ">
<homefoot></homefoot>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
    import LoginForm from "./LoginForm";
    import homefoot from "../home/homefoot";
    import LoginHead from "./LoginHead";

    export default {
        name: "LoginAndRegister",
      components:{
          LoginForm:LoginForm,
        homefoot:homefoot,
        LoginHead:LoginHead
        }
    }
</script>

<style scoped>
  html,
  body,
  .homeBox,
  .el-container{

    height: 100%;
  }
  .homeBox{
    height: calc(100vh);
  }
  .el-header, .el-footer {
  padding: 0px;

  }
.el-main{
  background:#eaedf1;
  background-image: url("https://img.tukuppt.com/ad_preview/00/41/84/6014dc1a73ab7.jpg!/fw/780");
  background-size:100% 100%;text-align: center;

}
  #main-loginBlock{
    background:white;
    top: 20%;
    width: 450px;
    height:350px;
    margin:100px auto;

    /*border-image-source: linear-gradient(top, #333333, #ffffff);*/
    /*border-image: linear-gradient(transparent, green, transparent) 1;*/
   /*background-image: url("https://img.tukuppt.com/ad_preview/00/19/40/5c99fda0d136c.jpg!/fw/780");*/
    border-image-slice: 1;

  }
  #main-loginTable{

   margin:20px auto;

    width: 340px;
    /*border: 2px solid;*/
    border-radius: 20px;

  }
  #title{
    padding-top: 40px;
    display: block;

  }

</style>
